<template>
  <div class="box">
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="address-content">
        <!-- 新建地址 -->
        <div class="list" v-for="(item,index) in list" :key="item.id">
          <div class="list-l">
            <p>{{item.name}}</p>
            <div v-if="index == 0" class="mo">默认</div>
          </div>
           <div class="list-c">
             <p>{{item.mobile}}</p>
             <p>{{item.address}}</p>
          </div>
           <div class="list-r" @click="onEdit(item)">
             <van-icon name="edit" />
          </div>
        </div>
    </div>
    <div class="buttom">
        <div @click="onAdd">+新建地址</div>
    </div>
  </div>
</template>
<script>
import { deleteAction, detailAction, saveAction, getListAction} from "@/api/my/address.js";
export default {
  data() {
    return {
        //选中的当前地址Id
        chosenAddressId:'1',
        //地址列表
        list:[],
        //是否是默认地址
        isDefault: true,
        mo:false,
    };
  },
  methods: {
    getAddress() {
      getListAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.list=res.data
      });
    },
    //返回上个页面
    onClickLeft(){
        this.$router.go(-1);
    },
    //新增地址
    onAdd(){
        this.$router.push({name:'saveAction'})
    },
    //编辑地址
    onEdit(item){
      // console.log(item)
      // var detailIdaddress=item.address,
     var detailIdid=item.id;
      // detailIdchecked=item.is_default,
      // detailIddetail=item.address_detail,
      // detailIdname=item.name,
      // detailIdNumber=item.mobile;
      // console.log(detailIdid)
      localStorage.setItem('detailIdid',detailIdid);
      // localStorage.setItem('detailIdaddress',detailIdaddress);
      // localStorage.setItem('detailIdchecked',detailIdchecked);
      // localStorage.setItem('detailIddetail',detailIddetail);
      // localStorage.setItem('detailIdname',detailIdname);
      // localStorage.setItem('detailIdNumber',detailIdNumber);
      this.$router.push({name:'detailActionss'})
      
    }

  },
  created() {
    this.getAddress();
  },
};
</script>
<style lang="scss" scoped>
.box{
  position: relative;
  .address-content{
width: 100%;
margin-top:50px;
margin-bottom: 100px;
  .list{
    // padding:10px;
    height: 100px;
    width:100%;
    background-color: #fff;
    margin-bottom: 5px;
    .list-l{
      float: left;
      width:20%;
      height: 100%;
      text-align: center;
      overflow: hidden;
      p{
        width: 100%;
        line-height: 30px;
      }
      .mo{
        width: 50%;
        margin: 0 auto;
        border: 1px solid #f31414;
        color:  #f31414;
        display:block;
      }
      
    }
    .list-c{
      float: left;
      width: 60%;
      height: 100%;
      overflow: hidden;
      p{
        line-height:20px;
      }
    }
    .list-r{
      width: 20%;
      // height: 100%;
      font-size:22px;
      margin-top:20px;
      float: left;
    }
  }
}
.buttom{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  div{
    width: 80%;
    height:40%;
    margin:40px auto;
    line-height:40px;
    text-align: center;
    border: 1px solid #b4282d;
    color: #b4282d;
    font-size: 16px;
  }
}
}

</style>